<!--
    用法:
    <func-bar v-on:setIndex="setIndex" :bars="bars"></func-bar>
    setIndex 将当前选中坐标传回。
    bars 传递信息进入
  -->
<template>
  <div class="func-bar">
    <v-chip label pill tile dark 
      v-for="(item, k) in bars" :key="k"
      @click="setIndex(k)" :class="mainTabClass(k)">
      <v-badge v-if="item.notify" dot overlap :color="item.color + ' accent-3'">
        <v-icon :color="item.color">{{item.icon}}</v-icon>
      </v-badge>
      <v-icon v-else :color="item.color">{{item.icon}}</v-icon>
    </v-chip>
    <v-chip label class="tool-tip" > {{toolTip}}</v-chip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
    };
  },
  props:["bars"],
  computed:{
    toolTip(){
      return (this.bars[this.index]).info
    }
  },
  methods: {
    setIndex(index) {
      if(this.index == index) {
        // 重复点击触发 toggle 操作
        this.$emit("toggle")
      } else {
        this.index = index;
        this.$emit("setIndex", index);
      }
    },
    mainTabClass(index) {
      return this.index == index ? "maintab tab-selected" : "maintab";
    },
  },
};
</script>
<style lang="scss" scoped>
.func-bar {
  -webkit-app-region: no-drag;
  position: absolute;
  top: 4px;
  height: 32px;
  overflow: hidden;
  .v-chip.v-size--default::v-deep {
    // border-radius: 0 !important;
  }
}
.v-chip.v-size--default {
  .v-icon::v-deep {
    font-size: 18px;
    height: 16px !important;
    width: 24px !important;
  }
}
.theme--light.v-chip:not(.v-chip--active) {
  background: transparent;
}
.tool-tip{
  font-size:12px !important;
  color:#f5f5f5 !important;
}
</style>
